<template>
	<view>
		<view class="map_container">
			<map class="map" id="map" :longitude="longitude" :latitude="latitude" scale="14" show-location="true"
				:markers="markers" bindmarkertap="makertap"></map>
		</view>
		<view class="rgc_info">
			<view>经度：{{longitude}}</view>
			<view>纬度：{{latitude}}</view>
		</view>
		<view>
			<input placeholder="输入关键字" type="text" :value="searchText" bindinput="handleInputChange" />
			<button bindtap="search">搜索</button>
		</view>
	</view>
</template>

<script>
	var bmap = require('../../baiduApi/bmap-wx.js'); //bmap-wx.js文件存放路径
	var wxMarkerData = [];
	export default {
		data() {
			return {
				BMap: null,
				searchKeyword: '',
				markers: [],
				latitude: '',
				longitude: '',
				rgcData: {}
			}
		},
		onLoad: function() {
			// 新建百度地图对象 
			this.BMap = new bmap.BMapWX({
				ak: '1pMspPZQfesqt60DGOrlXWE7f70ScvCb' //百度地图密钥
			});
			this.toSearch("北京")
		},
		methods: {
			handleInputChange: function(e) {
				this.searchKeyword = e.detail.value
			},
			search: function() {
				this.toSearch(this.searchKeyword)
			},
			toSearch: function(keyword) {
				let that = this; //重要，必须
				let fail = function(data) {
					console.log(data)
				};
				let success = function(data) {
					wxMarkerData = data.wxMarkerData;
					that.markers = wxMarkerData
					that.latitude = wxMarkerData[0].latitude
					that.longitude = wxMarkerData[0].longitude
				}
				// 发起geocoding检索请求 
				that.BMap.geocoding({
					address: keyword,
					fail: fail,
					success: success,
					iconPath: '../../static/image/index/ｏ@2x.png',
					iconTapPath: '../../static/image/index/ｏ@2x.png'
				});
			}
		}
	}
</script>

<style>
</style>
